<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>

<div class="content-wrap">
    <div class="wrapper" style="bottom: 50px;">
        <ul class="nav nav-tabs">
            <li>
                <a href="#"
                   onclick="loadDiv('rigthCenterDiv','${ctx}/csm/expDict/dialog?expCode=${expDict.expCode}&expName=${expDict.expName}')">规格列表</a>
            </li>
            <li class="active">
                <c:choose>
                    <c:when test="${expDict.id==''|| expDict.id==null}">
                        <a href="#">
                            添加规格
                        </a>
                    </c:when>
                    <c:otherwise><a href="#">规格修改</a></c:otherwise>
                </c:choose>
            </li>
        </ul>
        <section class="panel panel-default">
            <div class="panel-body">
                <div class="col-lg-12">
                    <form:form id="inputForm" data-parsley-validate="" modelAttribute="expDict"
                               onsubmit="return formSaveLoad('rigthCenterDiv','inputForm','${ctx}/csm/expDict/save','${ctx}/csm/expDict/dialog?expCode=${expDict.expCode}&expName=${expDict.expName}');"
                               method="post" class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-4">
                            <form:hidden path="id" id="id" htmlEscape="false" class="form-control" readonly="true"
                                        hidden="true"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">消耗品代码：</label>
                        <div class="col-sm-4">
                            <form:input path="expCode" id="expCode" htmlEscape="false" class="form-control"
                                        maxlength="20" readonly="true"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">消耗品名称：</label>
                        <div class="col-sm-4">
                            <form:input path="expName" id="expName" htmlEscape="false" class="form-control"
                                        maxlength="100" readonly="true"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">基本单位数量：</label>
                        <div class="col-sm-4">
                            <form:input path="dosePerUnit" id="dosePerUnit" onChange="changeDosePerUnit()"
                                        htmlEscape="false" class="form-control" data-parsley-required="true"
                                        data-parsley-type="number"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">基本单位：</label>
                        <div class="col-sm-4">
                            <form:select path="doseUnits" id="doseUnits" onChange="changeDoseUnits()"
                                         class="form-control" data-parsley-required="true">
                                <form:option value="" label="" data-parsley-required="true"/>
                                <form:options items="${fns:getDictList('dose_unit')}" itemLabel="label"
                                              itemValue="value" htmlEscape="false" data-parsley-required="true"/>
                            </form:select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">规格：</label>
                        <div class="col-sm-4">
                            <form:input path="expSpec" id="expSpec" htmlEscape="false" class="form-control"
                                        maxlength="20" data-parsley-required="true"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">单位：</label>
                        <div class="col-sm-4">
                            <form:select path="units" class="form-control" data-parsley-required="true">
                                <form:option value="" label="" data-parsley-required="true"/>
                                <form:options items="${fns:getDictList('SPEC_UNIT')}" itemLabel="label"
                                              itemValue="value" htmlEscape="false" data-parsley-required="true"/>
                            </form:select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">全成本分类：</label>
                        <div class="col-sm-4">
                            <form:select path="htcaClass" class="form-control">
                                <form:option value="" label=""/>
                                <form:options items="${fns:getDictList('COST_CLASS')}" itemLabel="label"
                                              itemValue="value" htmlEscape="false"/>
                            </form:select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">型号：</label>
                        <div class="col-sm-4">
                            <form:input path="expModel" id="expModel" htmlEscape="false" class="form-control"
                                        maxlength="100"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">材质：</label>
                        <div class="col-sm-4">
                            <form:input path="expIndicator" id="expIndicator" htmlEscape="false" class="form-control"
                                        maxlength="100"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">含量/有效成分：</label>
                        <div class="col-sm-4">
                            <form:input path="expContent" id="expContent" htmlEscape="false" class="form-control"
                                        maxlength="100"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">尺寸：</label>
                        <div class="col-sm-4">
                            <form:input path="expSize" id="expSize" htmlEscape="false" class="form-control"
                                        maxlength="100"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存">&nbsp;
                            <input id="btnCancel" class="btn" type="button" value="返 回"
                                   onclick="loadDiv('rigthCenterDiv','${ctx}/csm/expDict/dialog?expCode=${expDict.expCode}&expName=${expDict.expName}')">
                        </div>
                        </form:form>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
</div>

<script>
    //如果标题是修改属性，那么最小单位剂量、剂量单位、规格、单位四个字段不可编辑更改
    var idValue = document.getElementById('id').value;
    if (null != idValue && idValue != '') {
        var dosePerUnitValue = document.getElementById('dosePerUnit'); //最小单位剂量
        var doseUnitsValue = document.getElementById('doseUnits');     //剂量单位
        var expSpecValue = document.getElementById('expSpec');      //规格
        var unitValue = document.getElementById('units');              //单位
        dosePerUnitValue.readOnly = true;
        doseUnitsValue.disabled = true;
        expSpecValue.readOnly = true;
        unitValue.disabled = true;
    }

    //隐藏ID列
    document.getElementById('id').style.display = 'none';

    function changeDosePerUnit() {
        var dosePerUnit = document.getElementById("dosePerUnit").value;
        var doseUnits = document.getElementById("doseUnits").value;
        $("#expSpec").val(dosePerUnit + doseUnits);
    }
    function changeDoseUnits() {
        var dosePerUnit = document.getElementById("dosePerUnit").value;
        var doseUnits = document.getElementById("doseUnits").value;
        $("#expSpec").val(dosePerUnit + doseUnits);
    }
</script>